<template>
  <div class="tank_container">
    <span style="color: rgb(8, 214, 255); font-weight: 600; margin-left: 40px; white-space: pre">{{
      message
    }}</span>
    <div class="view">
      <div :style="tankStyle">
        <span :style="fwdColor" class="font_1">FWD</span>
        <div :style="fwdStyle" class="tank1"></div>
        <div :style="aftStyle" class="tank2"></div>
        <span :style="aftColor" class="font_2">AFT</span>
      </div>
      <div :style="totalStyle" class="total">31.3</div>
    </div>
    <canvas ref="canvasRef" width="180" height="140"></canvas>
  </div>
</template>

<!-- margin-top: -5px;margin-left: 3px; -->

<script setup>
import { onMounted, ref, defineProps, watch, reactive } from 'vue'
import { useStore } from 'vuex'

const props = defineProps({
  message: {
    type: String,
    default: `L  MAIN`
  },
  direction: {
    type: Boolean,
    default: false //false代表左油箱
  },
  fwdColor: {
    type: Object,
    default: {
      color: 'rgb(8, 214, 255)'
    }
  },
  aftColor: {
    type: Object,
    default: {
      color: 'rgb(8, 214, 255)'
    }
  }
})

const fwdStyle = reactive({
  border: '3px solid rgb(8, 255, 66)'
})

const aftStyle = reactive({
  border: '3px solid rgb(8, 255, 66)'
})

const store = useStore()
const canvasRef = ref(null)
const tankStyle = ref({
  'margin-top': '-5px',
  'margin-left': '3px'
})
const totalStyle = ref({
  'margin-left': '10px'
})

watch(
  () => ({
    lFwdPump: store.getters['fuel/lFwdPump'],
    lAftPump: store.getters['fuel/lAftPump'],
    rFwdPump: store.getters['fuel/rFwdPump'],
    rAftPump: store.getters['fuel/rAftPump'],
    cLeftPump: store.getters['fuel/cLeftPump'],
    cRightPump: store.getters['fuel/cRightPump']
  }),
  (newVals, oldVals) => {
    drawTankCanvas()
  },
  { deep: true }
)

let width = 0
let height = 0

onMounted(() => {
  if (props.direction) {
    totalStyle.value['margin-left'] = '-120px'
    tankStyle.value['margin-left'] = '83px'
  }
  drawTankCanvas()
})

const drawTankCanvas = () => {
  const canvas = canvasRef.value
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    width = canvas.width
    height = canvas.height
    drawCanvas(ctx, props.direction)
    setFwdPump('l', ctx)
    setAftPump('l', ctx)
    setAftPump('r', ctx)
    setFwdPump('r', ctx)
  }
}

/**
 * 设置油箱内部油路和油泵的状态
 * @param direction 表示是左侧油箱还是右侧油箱
 * @param ctx
 */
const setFwdPump = (direction, ctx) => {
  if (direction == 'r') {
    //设置右侧的油泵的状态
    if (props.message.substring(0, 1) == 'R') {
      fwdStyle.border = !store.getters['fuel/rFwdPump']
        ? '3px solid rgb(255, 255, 255)'
        : '3px solid rgb(8, 255, 66)'
      if (!store.getters['fuel/cRightPump'] && store.getters['fuel/rFwdPump']) {
        ctx.beginPath()
        ctx.moveTo(width * 0.59, height * 0.47)
        ctx.lineTo(0, height * 0.47)
        ctx.lineWidth = 10
        ctx.strokeStyle = 'rgb(8, 255, 66)'
        ctx.stroke()
        ctx.closePath()
      }
    }
  } else {
    //设置左侧油泵的状态
    if (props.message.substring(0, 1) == 'L') {
      fwdStyle.border = !store.getters['fuel/lFwdPump']
        ? '3px solid rgb(255, 255, 255)'
        : '3px solid rgb(8, 255, 66)'
      if (!store.getters['fuel/cLeftPump'] && store.getters['fuel/lFwdPump']) {
        ctx.beginPath()
        ctx.moveTo(width * 0.41, height * 0.47)
        ctx.lineTo(width * 1, height * 0.47)
        ctx.lineWidth = 10
        ctx.strokeStyle = 'rgb(8, 255, 66)'
        ctx.stroke()
        ctx.closePath()
      }
    }
  }
}

/**
 * 设置油箱内部油路和油泵的状态
 * @param direction 表示是左侧油箱还是右侧油箱
 * @param ctx
 */
const setAftPump = (direction, ctx) => {
  if (direction == 'r') {
    //设置右侧的油泵的状态
    if (props.message.substring(0, 1) == 'R') {
      aftStyle.border = !store.getters['fuel/rAftPump']
        ? '3px solid rgb(255, 255, 255)'
        : '3px solid rgb(8, 255, 66)'
      if (!store.getters['fuel/cRightPump'] && store.getters['fuel/rAftPump']) {
        ctx.beginPath()
        ctx.moveTo(width * 0.59, height * 0.85)
        ctx.lineTo(0, height * 0.85)
        ctx.lineWidth = 10
        ctx.strokeStyle = 'rgb(8, 255, 66)'
        ctx.stroke()
        ctx.closePath()
      }
    }
  } else {
    //设置左侧油泵的状态
    if (props.message.substring(0, 1) == 'L') {
      aftStyle.border = !store.getters['fuel/lAftPump']
        ? '3px solid rgb(255, 255, 255)'
        : '3px solid rgb(8, 255, 66)'
      if (!store.getters['fuel/cLeftPump'] && store.getters['fuel/lAftPump']) {
        ctx.beginPath()
        ctx.moveTo(width * 0.41, height * 0.85)
        ctx.lineTo(width * 1, height * 0.85)
        ctx.lineWidth = 10
        ctx.strokeStyle = 'rgb(8, 255, 66)'
        ctx.stroke()
        ctx.closePath()
      }
    }
  }
}

const drawCanvas = (ctx, direction) => {
  ctx.clearRect(0, 0, width, height)
  ctx.beginPath()
  if (!direction) {
    ctx.moveTo(width * 0.41, height * 0.47)
    ctx.lineTo(width, height * 0.47)
  } else {
    ctx.moveTo(width * 0.59, height * 0.47)
    ctx.lineTo(0, height * 0.47)
  }
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
  if (!direction) {
    ctx.moveTo(width * 0.41, height * 0.85)
    ctx.lineTo(width, height * 0.85)
  } else {
    ctx.moveTo(width * 0.59, height * 0.85)
    ctx.lineTo(0, height * 0.85)
  }
  ctx.lineWidth = 2
  ctx.strokeStyle = 'white'
  ctx.stroke()
}
</script>
<style scoped>
.tank_container {
  height: 140px;
  width: 180px;
  position: relative;
  z-index: 10;
}

.view {
  margin-left: 20px;
  display: flex;
  height: 140px;
  width: 140px;
  border: 2px solid rgb(8, 214, 255);
  border-radius: 4px;
  background-color: rgb(66, 66, 82);
}

.tank1 {
  height: 35px;
  width: 50px;
  background-color: rgb(27, 27, 31);
}

.total {
  margin-top: 48px;
  width: 60px;
  height: 30px;
  background-color: black;
  display: flex;
  /* 启用 Flexbox 布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  font-size: 20px;
}

.font_1 {
  font-size: 14px;
  margin-left: 10px;
  font-weight: 600;
}

.tank2 {
  margin-top: 18px;
  height: 35px;
  width: 50px;
  background-color: rgb(27, 27, 31);
}

.font_2 {
  font-size: 14px;
  margin-left: 10px;
  font-weight: 600;
}

/* Canvas的定位和样式 */
canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
